<template>
  <div class="add-price">
    <div class="notice-wrap">
      <div class="tip" @click="isShowTopDetail = !isShowTopDetail">
        <p>
          <span style="font-weight:500;">加价须知</span
          >：同时设置全局默认和单活动加价，以单活动加价为准
        </p>
        <i class="icon-arrow"></i>
      </div>
      <div class="tooltip" v-show="isShowTopDetail">
        <h2>加价须知：</h2>
        <div class="tip-close" @click="isShowTopDetail = false"></div>
        <p>
          1、默认加价上限为100元，超100元时，以100元为准。<br />
          2、若加价后的商品售价超过划线价，则以划线价作为售价。<br />
          3、当商品加价超过15元时，顾客购买该商品将无法享受优惠券抵扣政策。<br />
          4、同时设置了默认加价和按活动加价两种加价方式时，最终显示价格以活动加价为准。<br />
        </p>
      </div>
    </div>
    <div>
      <ul class="nav-tab">
        <li
          v-for="tabItem in tabList"
          :key="tabItem.id"
          :class="tabItem.id == curTab ? className[tabItem.id] : ''"
          @click="changeNav(tabItem.id)"
        >
          {{ tabItem.name }}
        </li>
      </ul>
      <keep-alive>
        <component :is="curTab"></component>
      </keep-alive>
    </div>
  </div>
</template>
<script>
import globalAddPrice from './component/globalAddPrice.vue';
import activityAddPrice from './component/activityAddPrice.vue';

export default {
  name: 'shopAddPrice',
  data() {
    return {
      isShowTopDetail: false,
      tabList: [
        { id: 'globalAddPrice', name: '全局加价' },
        { id: 'activityAddPrice', name: '单活动加价' }
      ],
      className: {
        globalAddPrice: 'tab-active1',
        activityAddPrice: 'tab-active2'
      },
      curTab: 'globalAddPrice'
    };
  },
  components: {
    globalAddPrice,
    activityAddPrice
  },
  methods: {
    changeNav(tabId) {
      this.curTab = tabId;
    }
  },
  mounted() {
    console.log('mounted====');
  }
};
</script>
<style lang="scss" scoped>
.add-price {
  height: 100vh;
  background-color: #f5f5f5;
  .notice-wrap {
    position: relative;
    .tip {
      height: 0.8rem;
      background: #fef8ef;
      display: flex;
      align-items: center;
      line-height: normal;
      padding-left: 0.24rem;

      p {
        font-size: 0.24rem;
        color: #ff6a0d;
        margin-right: 0.08rem;
        line-height: normal;
      }

      .icon-arrow {
        display: inline-block;
        width: 0.12rem;
        height: 0.2rem;
        background: url('../../assets/addPrice/icon-arrow.png') no-repeat;
        background-size: 100% 100%;
        margin-top: 1px;
      }
    }
    .tooltip {
      width: 4.62rem;
      background: rgba(0, 0, 0, 0.7);
      padding: 0.2rem 0.24rem 0.24rem 0.26rem;
      border-radius: 0.08rem;
      font-size: 0.22rem;
      position: absolute;
      top: 0.8rem;
      right: 0.4rem;
      z-index: 200;
      box-sizing: border-box;

      h2 {
        color: #fff;
        margin-bottom: 0.14rem;
        font-size: 0.24rem;
        font-weight: 500;
      }
      .tip-close {
        width: 0.54rem;
        height: 0.54rem;
        background: url('../../assets/addPrice/icon-tip-close.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 201;
      }
      p {
        color: #fff;
      }

      &::before {
        content: '';
        position: absolute;
        top: -0.28rem;
        right: 0.54rem;
        border-width: 0.14rem;
        border-style: solid;
        border-color: transparent transparent rgba(0, 0, 0, 0.7) transparent;
      }
    }
  }
  .nav-tab {
    display: flex;
    align-items: center;
    height: 1rem;
    background-color: #f5f5f5;
    font-size: 0.3rem;
    color: #ccc;
    font-weight: 500;

    li {
      flex: 1;
      height: 100%;
      text-align: center;
      line-height: 1rem;
    }

    .tab-active1 {
      background: url('../../assets/addPrice/tab-right.png') no-repeat;
      background-size: 100% 100%;
      color: #e62525;
    }

    .tab-active2 {
      background: url('../../assets/addPrice/tab-left.png') no-repeat;
      background-size: 100% 100%;
      color: #e62525;
    }
  }
}
</style>
